<template>
  <div class='echartssix' :style="{height:fullHeights+'px'}">
    <div id="echarts_six" :style="{height:fullHeight+'px'}"></div>
  </div>
</template>

<script>
  module.exports = {
    name: "echarts_six",
    data() {
      return {
        roadsectioncountlist: [],
        fullHeight: document.documentElement.clientHeight - 260,
        fullHeights: document.documentElement.clientHeight - 168
      }
    },
    mounted() {
      this.echartsdata();
    },
    methods: {
      echartsdata() {
        let myChart = echarts.init(document.getElementById('echarts_six'));
        let [dataArr, allArr, erArr, sanArr] = [
          [],
          [],
          [],
          []
        ];
        let items = [{
            name: "盘城街道",
            pointType: "cloud"
          },
          {
            name: "葛塘街道",
            pointType: "cloud"
          },
          {
            name: "长芦街道",
            pointType: "cloud"
          },

          {
            name: "板桥村",
            pointType: "point",
            belong: "盘城街道"
          },
          {
            name: "渡桥村社区",
            pointType: "point",
            belong: "盘城街道"
          },
          {
            name: "江北村",
            pointType: "point",
            belong: "盘城街道"
          },
          {
            name: "老幼岗村",
            pointType: "point",
            belong: "盘城街道"
          },
          {
            name: "双城社区",
            pointType: "point",
            belong: "盘城街道"
          },
          {
            name: "新华社区",
            pointType: "point",
            belong: "盘城街道"
          },
          {
            name: "永丰社区",
            pointType: "point",
            belong: "盘城街道"
          },
          {
            name: "盘城社区",
            pointType: "point",
            belong: "盘城街道"
          },
          {
            name: "落桥村",
            pointType: "point",
            belong: "盘城街道"
          },
          {
            name: "中山社区",
            pointType: "point",
            belong: "葛塘街道"
          },
          {
            name: "和平社区",
            pointType: "point",
            belong: "葛塘街道"
          },
          {
            name: "官塘河社区",
            pointType: "point",
            belong: "葛塘街道"
          },
          {
            name: "工农社区",
            pointType: "point",
            belong: "葛塘街道"
          },
          {
            name: "接待寺社区",
            pointType: "point",
            belong: "葛塘街道"
          },
          {
            name: "欣乐社区",
            pointType: "point",
            belong: "葛塘街道"
          },
          {
            name: "长城社区",
            pointType: "point",
            belong: "葛塘街道"
          },
          {
            name: "六甲社区",
            pointType: "point",
            belong: "长芦街道"
          },
          {
            name: "小摆渡社区",
            pointType: "point",
            belong: "长芦街道"
          },
          {
            name: "新犁社区",
            pointType: "point",
            belong: "长芦街道"
          },
          {
            name: "普东社区",
            pointType: "point",
            belong: "长芦街道"
          },
          {
            name: "滨江社区",
            pointType: "point",
            belong: "长芦街道"
          },
          {
            name: "玉带社区",
            pointType: "point",
            belong: "长芦街道"
          },
          {
            name: "留左社区",
            pointType: "point",
            belong: "长芦街道"
          },
          {
            name: "白玉社区",
            pointType: "point",
            belong: "长芦街道"
          },
          {
            name: "通江集社区",
            pointType: "point",
            belong: "长芦街道"
          },
          {
            name: "长芦中心社区",
            pointType: "point",
            belong: "长芦街道"
          },
          {
            name: "陆营社区",
            pointType: "point",
            belong: "长芦街道"
          }
        ]
        // 点
        items.forEach((el, ind) => {
          if (el.pointType === "cloud") {
            // 云
            el.symbol =
              "image://";
            el.symbolSize = [56, 35];
            el.label = {
              normal: {
                show: true,
                position: "bottom",
                borderWidth: 1,
                borderRadius: 12,
                padding: [4, 8, 4, 8],
                distance: 10,
                color: "rgb(255,255,255)",
                borderColor: "rgb(89,197,238)",
              }
            };
            erArr.push(el);
          } else if (el.pointType === "point") {
            // 球
            el.itemStyle = {
              borderColor: 'rgba(4, 242, 28, 1)',
              borderWidth: 3,
              color: "#0ceffd",
            };
            // 清除没有父节点的值
            // sanArr.push(el);
            if (el.belong && !items.some((iteP) => el.belong === iteP.name)) {
              items.splice(ind, 1);
            } else {
              sanArr.push(el);
            }
          }
          if (!el.belong) {
            el.children = [];
            items.forEach((es) => {
              if (es.belong === el.name) {
                el.children.push(es);
              }
            });
            allArr.push(el);
          }
        });
        // 圆形分区
        function group(arr, r) {
          const newArray = [];
          const {
            length: arLen
          } = arr;
          arr.forEach((e, ind) => {
            // 按角度均匀分布
            const ang = 90 - (360 / arLen).toFixed(2) * (ind + 1);
            const x = (Math.cos(ang * Math.PI / 180)).toFixed(2) * r;
            const y = (Math.sin(ang * Math.PI / 180)).toFixed(2) * r;
            e.value = [x.toFixed(2), y.toFixed(2)];
            if (e.belong) {
              let rotate = '';
              const angle = (160 / arr.length).toFixed(2);
              if (x > 0 && y >= 0) {
                rotate = (r - angle * (ind)).toFixed(2);
                // rotate = (90 - 360 / arr.length * (ind + 1)).toFixed(2);
              } else if (x <= 0 && y > 0) {
                rotate = (-r + angle * (arr.length - ind)).toFixed(2);
              } else if (x < 0 && y <= 0) {
                rotate = (r - angle * (ind - arr.length * 0.5)).toFixed(2);
              } else if (x >= 0 && y < 0) {
                rotate = (-8 + angle * (arr.length * 0.25 - ind)).toFixed(2);
              }
              e.label = {
                show: true,
                width: 200,
                color: {
                  lineColor: {
                    color: "rgb(24,163,239)",
                  },
                },
                rotate,
                align: x > 0 ? 'left' : 'right',
                padding: x > 0 ? [0, 0, 0, 16] : [0, 16, 0, 0],
              };
            }
            newArray.push(e);
          });
          return newArray;
        }
        // 线配置
        function linesConfig(arr) {
          const [dataArr, targetCoord] = [
            [],
            [0, 0]
          ];
          arr.forEach((el) => {
            if (!el.belong) {
              dataArr.push([{
                  coord: targetCoord
                },
                {
                  coord: el.value,
                  lineStyle: el.lineStyle,
                  effect: {
                    symbolSize: [4, 16], // 动画的大小
                    period: 6, // 时间快慢
                    delay: 2, // 延时计算
                    ...el.effect,
                  },
                },
              ]);
              arr.forEach((element) => {
                if (element.belong === el.name) {
                  dataArr.push([{
                      coord: el.value
                    },
                    {
                      coord: element.value,
                      lineStyle: element.lineStyle,
                      effect: {
                        symbolSize: [4, 8], // 动画的大小
                        period: 6, // 时间快慢
                        delay: 2, // 延时计算
                        ...element.effect,
                      },
                    },
                  ]);
                }
              });
            }
          });
          return dataArr;
        }
        // 点分布
        erArr = group(erArr, 36);
        sanArr = group(sanArr, 50);
        allArr = [...erArr, ...sanArr];
        // 线坐标和配置
        dataArr = linesConfig(allArr);
        let option = {
          backgroundColor: '',
          xAxis: {
            show: false,
            type: "value",
            max: 50,
            min: -51,
          },
          grid: {
            top: 100,
            bottom: 100,
            left: 130,
            right: 130,
          },
          yAxis: {
            show: false,
            type: "value",
            max: 50,
            min: -50,
          },
          series: [{
              type: "graph",
              coordinateSystem: "cartesian2d",
              z: 3,
              itemStyle: {
                normal: {
                  shadowColor: "none",
                },
              },
              data: allArr,
            },
            {
              name: "",
              type: "lines",
              coordinateSystem: "cartesian2d",
              polyline: true,
              z: 1,
              lineStyle: {
                width: 2,
                color: '#fff',
                curveness: 0,
              },
              effect: {
                show: true,
                smooth: false,
                trailLength: 0, // 拖尾的长度
                symbol: 'pin', // 动画的类型
              },
              data: dataArr
            }
          ]
        }
        myChart.setOption(option);
        window.onresize = function() {
          myChart.resize();
        }
      }
    }
  }
</script>
